<template>
  <view class="container">

    
    <!-- 地图容器 -->
    <view class="map-container">
      <map 
        id="myMap" 
        :latitude="latitude" 
        :longitude="longitude" 
        :markers="markers" 
        :polyline="polyline"
        :scale="scale"
        :show-location="true"
        class="map">
      </map>
    </view>
    
    <!-- 控制面板 -->
 <!--   <view class="control-panel">
      <button @click="getLocation" class="btn">定位当前位置</button>
      <button @click="addMarker" class="btn">添加标记</button>
      <button @click="drawRoute" class="btn">绘制路线</button>
      <button @click="switchToWebView" class="btn secondary">切换WebView方案</button>
    </view> -->
    
    <!-- POI列表 -->
    
    
  </view>
</template>

<script>
// 引入高德小程序SDK
// import amap from '@/static/libs/amap-wx.js';
// const amapFile = require('@/static/libs/amap-wx.130.js');
 import * as amapFile from '@/static/libs/amap-wx.130.js';
export default {
  data() {
    return {
      // 地图中心点
      latitude: 39.90923,
      longitude: 116.397428,
      
      // 地图缩放级别
      scale: 14,
      
      // 标记点
      markers: [{
        id: 0,
        latitude: 39.90923,
        longitude: 116.397428,
        title: '北京市中心',
        iconPath: '/static/location.png',
        width: 30,
        height: 30
      }],
      
      // 路线
      polyline: [],
      
      // 周边POI列表
      // poiList: [],
      
      // 高德实例
      amapPlugin: null
    };
  },
  onLoad() {
    // 初始化高德地图
    this.amapPlugin = new amapFile.AMapWX({
      key: '18997a286e73c2d94837b10f89516387'
    });
    
    // 获取当前位置
    this.getLocation();
  },
  methods: {
    // 获取当前位置
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.latitude = res.latitude;
          this.longitude = res.longitude;
          
          // 移动地图中心点
          this.markers[0] = {
            id: 0,
            latitude: res.latitude,
            longitude: res.longitude,
            title: '当前位置',
            iconPath: '/static/location.png',
            width: 30,
            height: 30
          };
          
          // 获取周边POI
          this.getPoiAround();
        },
        fail: (err) => {
          uni.showToast({
            title: '定位失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 获取周边POI
    getPoiAround() {
      this.amapPlugin.getPoiAround({
        location: `${this.longitude},${this.latitude}`,
        success: (data) => {
          // this.poiList = data.markers.map(marker => ({
          //   id: marker.id,
          //   name: marker.name,
          //   address: marker.address,
          //   distance: marker.distance
          // }));
        }
      });
    },
    
    // 添加标记
    // addMarker() {
    //   const newMarker = {
    //     id: this.markers.length,
    //     latitude: this.latitude + (Math.random() - 0.5) * 0.01,
    //     longitude: this.longitude + (Math.random() - 0.5) * 0.01,
    //     title: `标记点${this.markers.length}`,
    //     iconPath: '/static/marker.png',
    //     width: 25,
    //     height: 35
    //   };
      
    //   this.markers.push(newMarker);
    //   uni.showToast({
    //     title: '标记已添加',
    //     icon: 'success'
    //   });
    // },
    
    // 绘制路线
    drawRoute() {
      // 清除之前的路线
      // this.polyline = [];
      
      // // 生成随机路线点
      // const points = [];
      // for (let i = 0; i < 5; i++) {
      //   points.push({
      //     latitude: this.latitude + (Math.random() - 0.5) * 0.02,
      //     longitude: this.longitude + (Math.random() - 0.5) * 0.02
      //   });
      // }
      
      // // 添加路线
      // this.polyline = [{
      //   points: points,
      //   color: '#0081ff',
      //   width: 4,
      //   dottedLine: false
      // }];
      
      // uni.showToast({
      //   title: '路线已生成',
      //   icon: 'success'
      // });
    },
    
    // 切换到WebView方案
    // switchToWebView() {
    //   uni.navigateTo({
    //     url: '/pages/map-webview/map-webview'
    //   });
    // }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f7fa;
}

.header {
  padding: 15px;
  background: #1a73e8;
  color: white;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.subtitle {
  font-size: 12px;
  opacity: 0.8;
  display: block;
  margin-top: 4px;
}

.map-container {
  flex: 1;width: 100vw;height:100vh;
  position: relative;
}

.map {
  width: 100%;
  height: 100%;
}








</style>